<template>
  <div class="tab" ref="tab">
	  <a v-for="(value,index) in title" @mouseenter="enter(index)" @mouseleave="leave(index)" 
		@click="change(index)" :class="{'active':enterIndex==index,'tabItem':true}" href="#">
	    {{value}}
	  </a>
  </div>
</template>

<script>
	
  export default{
    name:'',
    data(){
      return {
				activeIndex:0,
				enterIndex:0
      }
    },
	props:{
	  title:{
	    type:Array,
	    default(){
	      return []
	    }
	  },
	  indexName:{
		  type:String,
		  default(){
			  return ""
		  }
	  },
		routes:{
			type:Array,
			default(){
			  return []
			}
		}
	},
    methods:{
      change(i){
				window.event.preventDefault()
				if(this.routes.length){
					this.$router.replace('/'+this.routes[i])
				}
				else{
					this.$store.state[this.indexName]=i
					this.$bus.emit('tabChange',this.indexName)
				}
				this.activeIndex=i
      },
			enter(i){
				this.enterIndex=i
			},
			leave(i){
				this.enterIndex=this.activeIndex
			}
    },
    components:{
       
    }
  }
</script>

<style scoped>
	.tab{
	  display: flex;
	  text-align: center;
	  background-color: white;
	  
	}
	.tabItem{
	  flex: 1;
		font-size: var(--font-big-size);
		line-height: var(--big-height);
		transition: all 0.5s;
	}
	.active,.enter{
	  color: white;
	  background-color: var(--bcc-green);
	}
</style>
